import React, { useState, useEffect } from 'react';
import { CheckCircle, XCircle, AlertTriangle, Info, X } from 'lucide-react';

export interface ToastMessage {
  id: string;
  type: 'success' | 'error' | 'warning' | 'info';
  title: string;
  message?: string;
  duration?: number;
}

interface ToastProps {
  toast: ToastMessage;
  onClose: (id: string) => void;
}

const Toast: React.FC<ToastProps> = ({ toast, onClose }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [isLeaving, setIsLeaving] = useState(false);

  useEffect(() => {
    // 进入动画
    const timer = setTimeout(() => setIsVisible(true), 50);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    // 自动关闭
    if (toast.duration !== 0) {
      const timer = setTimeout(() => {
        handleClose();
      }, toast.duration || 4000);
      return () => clearTimeout(timer);
    }
  }, [toast.duration]);

  const handleClose = () => {
    setIsLeaving(true);
    setTimeout(() => {
      onClose(toast.id);
    }, 300);
  };

  const typeConfig = {
    success: {
      icon: CheckCircle,
      bgColor: 'bg-gradient-to-r from-green-500 to-emerald-600',
      borderColor: 'border-green-200',
      textColor: 'text-white',
      iconColor: 'text-white'
    },
    error: {
      icon: XCircle,
      bgColor: 'bg-gradient-to-r from-red-500 to-red-600',
      borderColor: 'border-red-200',
      textColor: 'text-white',
      iconColor: 'text-white'
    },
    warning: {
      icon: AlertTriangle,
      bgColor: 'bg-gradient-to-r from-yellow-500 to-orange-500',
      borderColor: 'border-yellow-200',
      textColor: 'text-white',
      iconColor: 'text-white'
    },
    info: {
      icon: Info,
      bgColor: 'bg-gradient-to-r from-blue-500 to-blue-600',
      borderColor: 'border-blue-200',
      textColor: 'text-white',
      iconColor: 'text-white'
    }
  };

  const config = typeConfig[toast.type];
  const IconComponent = config.icon;

  return (
    <div
      className={`
        transform transition-all duration-300 ease-in-out mb-4
        ${isVisible && !isLeaving ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'}
        ${isLeaving ? 'scale-95' : 'scale-100'}
      `}
    >
      <div className={`
        ${config.bgColor} ${config.borderColor} border rounded-xl shadow-lg backdrop-blur-sm
        p-4 min-w-[320px] max-w-md relative overflow-hidden
      `}>
        {/* 背景装饰 */}
        <div className="absolute top-0 right-0 w-20 h-20 bg-white opacity-10 rounded-full -mr-10 -mt-10"></div>
        
        <div className="flex items-start space-x-3 relative">
          <div className="flex-shrink-0">
            <IconComponent className={`w-6 h-6 ${config.iconColor}`} />
          </div>
          
          <div className="flex-1 min-w-0">
            <h4 className={`font-semibold ${config.textColor} mb-1`}>
              {toast.title}
            </h4>
            {toast.message && (
              <p className={`text-sm ${config.textColor} opacity-90 leading-relaxed`}>
                {toast.message}
              </p>
            )}
          </div>
          
          <button
            onClick={handleClose}
            className={`
              flex-shrink-0 p-1 rounded-lg transition-colors
              hover:bg-white hover:bg-opacity-20 ${config.textColor}
            `}
          >
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* 进度条 */}
        {toast.duration !== 0 && (
          <div className="absolute bottom-0 left-0 w-full h-1 bg-white bg-opacity-20">
            <div 
              className="h-full bg-white bg-opacity-40 transition-all ease-linear"
              style={{
                animation: `shrink ${toast.duration || 4000}ms linear forwards`
              }}
            />
          </div>
        )}
      </div>
    </div>
  );
};

interface ToastContainerProps {
  toasts: ToastMessage[];
  onClose: (id: string) => void;
}

export const ToastContainer: React.FC<ToastContainerProps> = ({ toasts, onClose }) => {
  if (toasts.length === 0) return null;

  return (
    <div className="fixed top-4 right-4 z-50 space-y-2">
      {toasts.map((toast) => (
        <Toast key={toast.id} toast={toast} onClose={onClose} />
      ))}
    </div>
  );
};

// CSS 动画
const style = document.createElement('style');
style.textContent = `
  @keyframes shrink {
    from { width: 100%; }
    to { width: 0%; }
  }
`;
document.head.appendChild(style);